<template>
  <div class="knowledge-test">
    <!-- Top Navigation -->
    <top-nav
      :username="username"
      v-model:is-dark="isDark"
    />

    <!-- Main Content -->
    <div class="main-content">
      <!-- Left Sidebar -->
      <knowledge-sidebar :username="username" />

      <!-- Test Content -->
      <div class="test-content">
        <div class="test-header">
          <h2>检索测试</h2>
          <div class="description">
            请完成召回测试：确保你的配置可以从数据库召回正确的文本块。如果你调整了这里的默认设置，比如关键字相似度权重，请注意这里的改动不会被自动保存。请务必在聊天助手主设置或者召回子设置处同步更新相关设置。
          </div>
        </div>

        <div class="test-main">
          <!-- Left: Configuration -->
          <div class="config-section">
            <!-- Selected Files -->
            <div class="selected-files-section">
              <div class="section-header">
                <span class="title">选定的文件</span>
                <span class="count">0/0</span>
              </div>
              <div class="file-list">
                <el-empty description="暂无选定文件" />
              </div>
            </div>

            <!-- Settings -->
            <div class="settings-section">
              <div class="setting-item">
                <div class="setting-header">
                  <span class="label">相似度阈值</span>
                  <el-tooltip content="设置文本块相似度的最小阈值" placement="top">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
                <el-slider
                  v-model="similarityThreshold"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :format-tooltip="value => (value * 100).toFixed(0) + '%'"
                />
              </div>

              <div class="setting-item">
                <div class="setting-header">
                  <span class="label">关键字相似度权重</span>
                  <el-tooltip content="设置关键字匹配在相似度计算中的权重" placement="top">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
                <el-slider
                  v-model="keywordWeight"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :format-tooltip="value => (value * 100).toFixed(0) + '%'"
                />
              </div>

              <div class="setting-item">
                <div class="setting-header">
                  <span class="label">Rerank模型</span>
                  <el-tooltip content="选择重排序模型" placement="top">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
                <el-select v-model="rerankModel" placeholder="请选择">
                  <el-option label="bge-reranker-base" value="bge-reranker-base" />
                  <el-option label="bge-reranker-large" value="bge-reranker-large" />
                </el-select>
              </div>

              <div class="setting-item">
                <div class="setting-header">
                  <span class="label">使用知识通道</span>
                  <el-tooltip content="是否使用知识通道进行检索" placement="top">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
                <el-switch v-model="useKnowledgeChannel" />
              </div>
            </div>

            <!-- Test Input -->
            <div class="test-input-section">
              <div class="section-header">
                <span class="label">测试文本</span>
              </div>
              <el-input
                v-model="testQuery"
                type="textarea"
                :rows="6"
                placeholder="请输入测试文本..."
                resize="none"
              />
              <div class="actions">
                <el-button type="primary" :disabled="!testQuery.trim()">开始测试</el-button>
              </div>
            </div>
          </div>

          <!-- Right: Results -->
          <div class="results-section">
            <div class="section-header">
              <span class="title">检索结果</span>
              <el-select v-model="pageSize" class="page-size-select">
                <el-option :value="10" label="10 条/页" />
                <el-option :value="20" label="20 条/页" />
                <el-option :value="50" label="50 条/页" />
              </el-select>
            </div>
            
            <div class="results-content">
              <el-empty description="暂无检索结果" />
            </div>

            <!-- Pagination -->
            <div class="pagination">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :total="total"
                :page-sizes="[10, 20, 50]"
                layout="total, sizes, prev, pager, next"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'
import TopNav from '../components/TopNav.vue'
import KnowledgeSidebar from '../components/KnowledgeSidebar.vue'

// Data
const username = ref('qinzhenlong')
const isDark = ref(false)
const testQuery = ref('')
const selectedCount = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)

// Settings
const similarityThreshold = ref(0.5)
const keywordWeight = ref(0.3)
const rerankModel = ref('bge-reranker-base')
const useKnowledgeChannel = ref(false)
</script>

<style scoped lang="scss">
.knowledge-test {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color-page);
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.test-content {
  flex: 1;
  padding: 20px 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .test-header {
    margin-bottom: 24px;

    h2 {
      margin: 0 0 12px;
      font-size: 24px;
      font-weight: 500;
    }

    .description {
      color: var(--el-text-color-secondary);
      line-height: 1.6;
      font-size: 14px;
    }
  }

  .test-main {
    flex: 1;
    display: flex;
    gap: 24px;
    min-height: 0; // 重要：防止 flex 子元素溢出
  }

  .config-section {
    width: 400px;
    overflow-y: auto;
    padding-right: 12px;
  }

  .results-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--el-bg-color);
    border-radius: 8px;
    border: 1px solid var(--el-border-color-light);
    padding: 20px;
    overflow: hidden;

    .results-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pagination {
      padding-top: 16px;
      border-top: 1px solid var(--el-border-color-light);
      display: flex;
      justify-content: center;
    }

    .page-size-select {
      width: 110px;
    }
  }

  .selected-files-section,
  .settings-section,
  .test-input-section {
    background-color: var(--el-bg-color);
    border-radius: 8px;
    border: 1px solid var(--el-border-color-light);
    padding: 20px;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .title, .label {
      font-size: 16px;
      font-weight: 500;
    }

    .count {
      color: var(--el-text-color-secondary);
      font-size: 14px;
    }
  }

  .file-list {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--el-fill-color-blank);
    border-radius: 4px;
    border: 1px dashed var(--el-border-color);
  }

  .settings-section {
    .setting-item {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .setting-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;

        .label {
          font-size: 14px;
          font-weight: 500;
        }

        .el-icon {
          color: var(--el-text-color-secondary);
          cursor: help;
        }
      }

      .el-slider {
        margin-top: 8px;
      }

      .el-select {
        width: 100%;
      }
    }
  }

  .test-input-section {
    .actions {
      margin-top: 16px;
      display: flex;
      justify-content: flex-end;
    }

    .el-input {
      font-size: 14px;

      :deep(.el-textarea__inner) {
        font-family: var(--el-font-family);
      }
    }
  }
}
</style> 